<template>
  <div>
    <!-- 搜索栏 -->
    <!-- {{ tableData }} -->
    <div class="header">
      <h2>面签审核:{{ tableData.custName }}</h2>
    </div>
    <el-divider></el-divider>
    <!-- <div class="loanbody">
      <el-row>
        <el-col :span="8">
          本人面签（必填项）
        </el-col>
        <el-col :span="12">
          <p v-if="tableData.selfFaceSign == '1'">面签通过</p>
          <p v-if="tableData.selfFaceSign == '2'">面签不通过</p>
          <p v-if="tableData.selfFaceSign == '3'">未决项</p>
        </el-col>
      </el-row>

      <el-row class="elrowmagtop">
        <el-col :span="8">
          备注：
        </el-col>
        <el-col :span="4">
          <el-input
            type="textarea"
            :rows="2"
            v-model="tableData.selfFaceSignRemark"
            readonly
          >
          </el-input>
        </el-col>
      </el-row>

      <el-row class="elrowmagtop">
        <el-col :span="8">
          第三方电核（必填项）
        </el-col>
        <el-col :span="12">
          <p v-if="tableData.thdTeleConfirm == '1'">电核一致</p>
          <p v-if="tableData.thdTeleConfirm == '2'">电核不一致</p>
          <p v-if="tableData.thdTeleConfirm == '3'">未决项</p>
        </el-col>
      </el-row>

      <el-row class="elrowmagtop">
        <el-col :span="8">
          备注：
        </el-col>
        <el-col :span="4">
          <el-input
            type="textarea"
            :rows="2"
            v-model="tableData.thdTeleConfirmRemark"
            readonly
          >
          </el-input>
        </el-col>
      </el-row>
      <el-row class="elrowmagtop">
        <el-col :span="8">
          其他补充:
        </el-col>
        <el-col :span="12"> </el-col>
      </el-row>
      <el-row class="elrowmagtop">
        <el-col :span="8">
          备注：
        </el-col>
        <el-col :span="4">
          <el-input
            type="textarea"
            :rows="2"
            v-model="tableData.otherSupplement"
            readonly
          >
          </el-input>
        </el-col>
      </el-row>
    </div> -->
    <div>
      <!-- 表格样式 -->
      <el-table
        ref="multipleTable"
        :data="recordshistorInfo.list"
        tooltip-effect="dark"
        style="width: 100%; font-size: 10px"
        @row-click="rowClick"
        :header-cell-style="{ textAlign: 'center' }"
        :cell-style="{ textAlign: 'center' }"
        :row-style="tableRowClassName"
      >
        <el-table-column
          :prop="item.prop"
          :label="item.label"
          v-for="(item, index) in recordshistorInfo.option"
          :key="index"
          :width="item.width"
        >
          <template slot-scope="scope">
            <span v-if="item.prop == 'selfFaceSign'">
              <p v-if="scope.row.selfFaceSign == '1'">面签通过</p>
              <p v-if="scope.row.selfFaceSign == '2'">面签不通过</p>
              <p v-if="scope.row.selfFaceSign == '3'">未决项</p>
            </span>

            <span v-else-if="item.prop == 'thdTeleConfirm'">
              <p v-if="scope.row.thdTeleConfirm == '1'">电核一致</p>
              <p v-if="scope.row.thdTeleConfirm == '2'">电核不一致</p>
              <p v-if="scope.row.thdTeleConfirm == '3'">未决项</p>
            </span>

            <span v-else>
              {{ scope.row[item.prop] }}
            </span>
          </template>
        </el-table-column>
      </el-table>
      <el-row
        type="flex"
        justify="end"
        align="middle"
        style="height: 60px"
        v-if="recordshistorInfo.paging"
      >
        <el-pagination
          background
          :current-page.sync="recordshistorInfo.page.page"
          :page-size="recordshistorInfo.page.pageSize"
          layout="total, prev, pager, next"
          :total="recordshistorInfo.page.total"
          :small="true"
        >
        </el-pagination>
      </el-row>
    </div>

    <!-- 按钮区 -->
    <div class="loanbtn">
      <el-button type="primary" @click="receive()">返回</el-button>
      <el-button type="primary" @click="answerhistory()">答题历史</el-button>
      <el-button type="primary" @click="videoInfo()">视频调阅</el-button>
    </div>
  </div>
</template>

<script>
import { getqueryInfohistorylists } from "@/api/hubeixiaojin/queryInfo";
// import {} from "@/api/";
export default {
  name: "loanhistorylist",
  props: ["tableData", "option"],
  components: {},

  data() {
    // 表单身份证x`
    var idcardReg = /^[1-9]\d{7}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}$|^[1-9]\d{5}[1-9]\d{3}((0\d)|(1[0-2]))(([0|1|2]\d)|3[0-1])\d{3}([0-9]|X)$/;
    var validatePhone = (rule, value, callback) => {
      if (!value) {
        return callback(new Error("证件号不能为空!!"));
      }
      if (!idcardReg.test(value)) {
        callback(new Error("请输入正确的证件号码！"));
      } else {
        callback();
      }
    };
    return {
      //表格修改背景色用
      radioId: [],
      //搜索框信息
      formInline: {
        idName: "",
        idNum: "",
        idContract: ""
      },
      recordshistorInfo: {
        list: [],
        paging: false,
        page: {
          total: 100,
          pageSize: 10,
          page: 1
        },
        option: [
          {
            label: "时间",
            prop: "startTime"
          },
          {
            label: "本人面签",
            prop: "selfFaceSign"
          },
          {
            label: "备注",
            prop: "selfFaceSignRemark"
          },
          {
            label: "第三方电核",
            prop: "thdTeleConfirm"
          },
          {
            label: "备注",
            prop: "thdTeleConfirmRemark"
          },
          {
            label: "其他补充",
            prop: "otherSupplement"
          }
        ]
      },
      agentInfo: {
        //当前座席名字和id
        // dispatchingPerson: Constants.Agent.agentName,
        // dispatchingId: Constants.Agent.agentId,
        // //目标座席和id
        // agentId: "",
        // agentName: "",
        // //座席行政组
        // deptGroupName: Constants.Agent.deptGroupName,
        // //行政组code
        // deptGroupCode: Constants.Agent.deptGroupCode,
        // //access_token
        // access_token: Constants.Agent.access_token,
        // //tenantId
        // tenantId: Constants.Agent.tenantId,
        // //orgCode
        // orgCode: Constants.Agent.orgCode
      }, //调单用到的座席信息
      //选择的待面签审核信息
      receiveInfo: []
    };
  },
  mounted() {
    const sessionStr = sessionStorage.getItem("userInfo");
    const agentUser = JSON.parse(sessionStr);
    this.agentInfo = agentUser.content;
    this.recordshistor();
    // console.log("面签状态", this.tableData.approvaResult);
  },
  methods: {
    receive() {
      // console.log("返回首页");
      this.$emit("receive");
    },
    answerhistory() {
      // console.log("答题历史");
      this.$emit("answerhistory");
    },
    videoInfo() {
      // console.log("视频调阅");
      this.$emit("videoInfo");
    },

    recordshistor() {
      // console.log("agentInfo==", this.agentInfo);
      // console.log("tableData==", this.tableData);
      var params = {};
      var approvaResult = this.tableData.approvaResult;

      if (approvaResult == "3") {
        console.log("当前数据为原始数据");
        params = {
          sortCol: "id",
          condition: {
            // status: "0,1,2,3,10,11,12",
            // pushStatus: false, //是否查核心。
            // faceInterviewId: this.tableData.id
            id: this.tableData.id,
            applSeq: this.tableData.applSeq
          } //申请状态
        };
      } else {
        console.log("当前数据为打回数据1");
        params = {
          sortCol: "id",
          condition: {
            // status: "0,1,2,3,10,11,12",
            // pushStatus: false, //是否查核心。
            // id: this.tableData.id,
            applSeq: this.tableData.applSeq
          } //申请状态
        };
      }

      getqueryInfohistorylists(params, this.agentInfo)
        .then(res => {
          if (res.data.retCode === 200) {
            // console.log("历史面签记录", res);
            var data = res.data.data.listData;
            var list = [],
              datas = [];
            data.forEach(element => {
              element.listSummarys.forEach(el => {
                datas.push(el);
              });
            });

            datas.forEach(element => {
              list.push({
                startTime: element.startTime || "",
                selfFaceSign: element.selfFaceSign || "",
                selfFaceSignRemark: element.selfFaceSignRemark || "",
                thdTeleConfirm: element.thdTeleConfirm || "",
                thdTeleConfirmRemark: element.thdTeleConfirmRemark || "",
                otherSupplement: element.otherSupplement || ""
              });
            });
            // console.log("面签历史List==", list);
            this.recordshistorInfo.list = list; //展示数据
          } else {
            window.globalUiKit.notify("提示", "未查询到面签历史", "info");
          }
        })
        .catch(err => {
          console.log(err);
        });
    }
  }
};
</script>

<style>
.Search {
  width: 100%;
  text-align: center;
}
.AdjustInput {
  display: flex;
  justify-content: end;
}
.loanbtn {
  display: flex;
  justify-content: end;
  margin-right: 100px;
  margin-top: 50px;
}
/* .loanbody {
  width: 95%;
  margin: 0 auto;
} */
</style>
